<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏栀来信网上购物商城 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="top-bar">
            <span>学号: 23215220329 姓名: 牟其鑫</span>
            <div class="user-actions">
                <a href="login.html">登录</a> | <a href="register.html">注册</a>
                <!-- 新增个人中心链接 -->
                | <a href="checkout.html" class="user-center">个人中心</a>
            </div>
        </div>
        <div class="main-header">
            <div class="logo">夏栀来信</div>
            <div class="search-box">
                <form id="search-form" action="product.html" method="get">
                    <input type="text" name="name" placeholder="搜索商品..." required>
                    <button type="submit">搜索</button>
                </form>
            </div>
            <div class="cart-icon">
                <a href="cart.html">购物车(<span id="cart-count">0</span>)</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">热门推荐</a></li>
                <li><a href="#">节日限定</a></li>
                <li><a href="#">园艺工具</a></li>
                <li><a href="#">养护指南</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- 轮播图 -->
        <section class="slider">
            <div class="slides">
                <img src="images/banner1.jpg" alt="促销活动1" class="active">
                <img src="images/banner2.jpg" alt="促销活动2">
                <img src="images/banner3.jpg" alt="促销活动3">
            </div>
            <div class="slider-controls">
                <span class="active" data-index="0"></span>
                <span data-index="1"></span>
                <span data-index="2"></span>
            </div>
        </section>

        <!-- 商品分类展示 -->
        <section class="category">
            <h2>热门推荐</h2>
            <div class="products">
                <div class="product-card">
                    <a href="product.html?id=1">
                        <img src="images/product1.png" alt="加百列大天使月季">
                        <h3>加百列大天使月季</h3>
                        <p class="price">¥199.00</p>
                    </a>
                    <button class="add-to-cart" data-id="1">加入购物车</button>
                </div>

                <div class="product-card">
                    <a href="product.html?id=2">
                        <img src="images/product2.png" alt="香雪栀子花">
                        <h3>香雪栀子花</h3>
                        <p class="price">¥39.00</p>
                    </a>
                    <button class="add-to-cart" data-id="2">加入购物车</button>
                </div>

                <div class="product-card">
                    <a href="product.html?id=3">
                        <img src="images/product3.png" alt="无尽夏绣球">
                        <h3>无尽夏绣球</h3>
                        <p class="price">¥29.00</p>
                    </a>
                    <button class="add-to-cart" data-id="3">加入购物车</button>
                </div>

                <div class="product-card">
                    <a href="product.html?id=4">
                        <img src="images/product4.png" alt="文竹">
                        <h3>文竹</h3>
                        <p class="price">¥9.00</p>
                    </a>
                    <button class="add-to-cart" data-id="4">加入购物车</button>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2023 夏栀来信网上购物商城 版权所有</p>
            <p>地址：某某省某某市某某区某某路123号</p>
            <p>联系电话：123-45678901</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>